<template>
  <div class="container mx-auto px-4 py-8 max-w-3xl">
    <article class="bg-white rounded-lg shadow-md p-6">
      <h1 class="text-4xl font-bold mb-6 text-gray-900 leading-tight">{{ post.title }}</h1>
      
      <div class="flex items-center space-x-6 text-sm text-gray-500 mb-8 border-b pb-6">
        <span>作者：{{ post.author }}</span>
        <span>发布日期：{{ post.created_at }}</span>
      </div>

      <img 
        :src="post.cover"
        class="w-full h-64 object-cover rounded-lg mb-6"
        alt="文章封面"
      >

      <div class="prose max-w-none mb-10 text-gray-700 leading-relaxed text-lg" v-html="post.content"></div>

      <div class="flex items-center space-x-4 border-t pt-6">
        <button 
          @click="handleLike"
          class="flex items-center space-x-2 text-blue-500 hover:text-blue-600"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 8.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
          <span>{{ post.likes }}</span>
        </button>
      </div>
    </article>

    <section class="mt-12 bg-white rounded-lg shadow-md p-6">
      <h2 class="text-2xl font-bold mb-6 text-gray-800">评论（{{ comments.length }}）</h2>
      
      <form @submit.prevent="submitComment" class="mb-8">
        <textarea
          v-model="newComment"
          class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          rows="3"
          placeholder="写下你的评论..."
        ></textarea>
        <button
          type="submit"
          class="mt-3 px-6 py-3 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg transition-all duration-300 font-medium"
        >
          提交评论
        </button>
      </form>

      <div v-for="comment in comments" :key="comment.id" class="border-b pb-4 mb-4">
        <div class="flex items-center justify-between mb-2">
          <span class="font-medium text-gray-700">{{ comment.author }}</span>
          <span class="text-sm text-gray-500">{{ comment.created_at }}</span>
        </div>
        <p class="text-gray-600">{{ comment.content }}</p>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const post = ref({})
const comments = ref([])
const newComment = ref('')
const commenterName = ref('')
const commenterEmail = ref('')

const fetchPost = async () => {
  try {
    const response = await axios.get('/api.php?c=BlogPost&a=getPost', {
      params: {
        id: route.params.id
      }
    })
    post.value = response.data
  } catch (error) {
    console.error('获取文章失败:', error)
  }
}

const fetchComments = async () => {
  try {
    const response = await axios.get(`/api/posts/${route.params.id}/comments`)
    comments.value = response.data
  } catch (error) {
    console.error('获取评论失败:', error)
  }
}

const handleLike = async () => {
  try {
    await axios.post(`/api/posts/${route.params.id}/like`)
    post.value.likes += 1
  } catch (error) {
    console.error('点赞失败:', error)
  }
}

const submitComment = async () => {
  if (!newComment.value.trim()) return
  
  try {
    const response = await axios.post('/api.php?c=Comment&a=addComment', {
      id: route.params.id,
      name: commenterName.value,
      email: commenterEmail.value,
      comment: newComment.value,
      img: userAvatar.value
    })
    comments.value.unshift(response.data)
    newComment.value = ''
  } catch (error) {
    console.error('提交评论失败:', error)
  }
}

onMounted(() => {
  fetchPost()
  fetchComments()
})
</script>